<template>
	<div style="height: 100%;">

		<div class="displayFlexBet" style="margin-bottom: 10px;">

			<div class="displayFlex">
				<el-input placeholder="产污环节" v-model="getParams.linkName" style="width: 150px;" clearable></el-input>

				<el-select v-model="getParams.busiStatus" filterable placeholder="请选择" style="margin-left: 10px;width: 120px;">
					<el-option label="启用" value="IN_USE" />
					<el-option label="停用" value="NOT_USE" />
				</el-select>

				<el-button type="primary" style="margin-left: 10px;" icon="el-icon-search" @click="pageLink">筛选</el-button>
			</div>

			<div class="displayFlex point">
				<el-button @click="$refs.linkManage.addData()" icon="el-icon-plus"
					type="primary" size="mini">新增产污环节</el-button>
			</div>

		</div>
		<el-table :data="linkList" border size="mini">
			<el-table-column type="index" width="50">
			</el-table-column>
			<el-table-column prop="areaName" label="场地">
			</el-table-column>
			<el-table-column prop="sourceName" label="产生源名称">
			</el-table-column>
			<el-table-column prop="linkName" label="产污环节">
			</el-table-column>
			<el-table-column prop="linkCode" label="产污环节编号" width="100">
			</el-table-column>
			<el-table-column prop="pollutionNameList" label="废物列表">
			</el-table-column>
			<el-table-column prop="busiStatusStr" label="状态" width="80">
			</el-table-column>
			<el-table-column label="操作" align="center" fixed="right" width="150">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="showXunJianDia(scope.row)">巡检项</el-button>

					<el-button type="text" size="small"
						@click="$refs.linkManage.editData(scope.row)">编辑</el-button>
					<el-button @click="updateBusiStatus(scope.row,'gasLink')" v-if="scope.row.busiStatus == 'IN_USE'" type="text"
						size="small">停用</el-button>
					<el-button @click="updateBusiStatus(scope.row,'gasLink')" v-else type="text" size="small">启用</el-button>
				</template>
			</el-table-column>
		</el-table>


		<el-dialog :visible.sync="xunjian.show" top="2%" title="巡检项信息" :modal="false" width="30%">
			<el-form :model="xunjian.params" label-width="140px">
				<el-form-item label="巡检项名称" prop="inspectItemName" required>
					<el-input v-model="xunjian.params.inspectItemName" placeholder="巡检项信息"></el-input>
				</el-form-item>

				<el-form-item label="记录值类型" prop="valueType">
					<el-select v-model="xunjian.params.valueType" placeholder="记录值类型" style="width: 100%;">
						<el-option label="数值" value="NUMBER" />
						<el-option label="状态" value="STATE" />
					</el-select>
				</el-form-item>
				
				<el-form-item label="说明" prop="remark">
					<el-input v-model="xunjian.params.remark" placeholder="说明"></el-input>
				</el-form-item>

				<div style="text-align: center;margin-top: 50px;">
					<el-button type="primary" @click="saveXunJian(1)">保存</el-button>
				</div>
			</el-form>
		</el-dialog>


		<el-dialog :visible.sync="linkItemList.show" title="巡检项列表" width="30%">
			<template v-if="linkItemList.data.length > 0">
				<el-tag v-for="(item,index) in linkItemList.data" :key="index" effect="dark" closable class="point"
					@close="deleteInspectItem(item,index)" @click="xunjian.params = item,xunjian.show = true"
					style="margin-right: 10px;margin-bottom: 10px;">
					{{item.inspectItemName}}
				</el-tag>
			</template>
			<el-button style="margin-left: 10px;height: 32px;line-height: 30px; padding-top: 0; padding-bottom: 0;"
				size="small" @click="xunjian.show=true,xunjian.params = $options.data().xunjian.params">
				+ 添加巡检项
			</el-button>
		</el-dialog>
		
		<linkManage ref="linkManage" @success="pageLink()" @close="pageLink()"></linkManage>
	</div>
</template>

<script>
	let that
	import linkManage from '@/components/baseInfo/linkManage'
	export default {
		components: {
			linkManage
		},
		data() {
			return {
				visible3: false,
				gasLinkParams: {
					linkType: 'GAS_LINK',
					linkPollutionList: [{
						pollutionId: '',
						isInspect: false,
					}],
				},
				linkList: [],
				areaList: [],
				sourceList: [],
				pollutionList: [],
				formRules3: {
					areaId: [{
						required: true,
						message: '场地',
						trigger: ['change', 'blur']
					}],

					linkCode: [{
						required: true,
						message: '产污环节编号',
						trigger: 'blur'
					}],
					linkName: [{
						required: true,
						message: '产污环节名称',
						trigger: 'blur'
					}],
				},
				getParams: {
					linkName: '', // 产污环节名称
					linkType: '', // 产污环节类型
					busiStatus: 'IN_USE', // 启用状态
				},
				xunjian: {
					show: false,
					params: {
						linkId: '', // 防治设施id
						inspectItemName: '', // 巡检项名称
						valueType: 'NUMBER', // 记录值类型
						remark:''
					}
				},
				linkItemList: {
					id: '',
					show: false,
					data: []
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.pageLink()
			that.getAreaList()
			that.getEquipmentList()
			that.getEntPollutionList()
		},

		methods: {

			showXunJianDia(item) {
				that.linkItemList.show = true
				that.linkItemList.data = item.inspectItemList
				item.linkPollutionList = item.linkPollutionList || []
				that.gasLinkParams = item
			},

			//保存巡检项
			saveXunJian() {
				if (!that.xunjian.params.inspectItemName) return that.$message.error("请填写完整")
				that.xunjian.params.linkType = that.gasLinkParams.linkType
				that.xunjian.params.linkId = that.gasLinkParams.id
				that.ajax({
					url: '/linkMng/saveLinkItem',
					data: JSON.stringify(that.xunjian.params),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.linkItemList.show = false
							that.xunjian.show = false
							that.pageLink()
						}
					},
				})
			},


			deleteInspectItem(item, index) {
				this.$confirm('是否确定删除此巡检项?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/linkMng/deleteLinkItem',
						data: JSON.stringify({
							id: item.id,
							linkType: that.gasLinkParams.linkType
						}),
						contentType: 'application/json',
						success: function(result) {
							if (result.data) {
								that.linkItemList.data.splice(index, 1)
								that.pageLink()
							}
						},
					})
				})
			},

			//保存原辅料
			saveGasLink() {
				this.$refs['form3'].validate(function(valid) {
					if (valid) {
						that.ajax({
							url: 'linkMng/saveLink',
							data: JSON.stringify(that.gasLinkParams),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) {
									that.pageLink()
									that.visible3 = false
									return that.$message({
										message: '保存成功！',
										type: 'success'
									});
								}
							},
						})
					}
				})
			},


			getEntPollutionList(value) {
				if (value) {
					if (value != that.gasLinkParams.linkType) {
						that.gasLinkParams.linkPollutionList = []
					}
					that.gasLinkParams.linkType = value
					that.$forceUpdate()
				}
				let thisParams = {
					pollutionType: 'GAS_POLLUTION'
				}
				if (that.gasLinkParams.linkType == "WATER_LINK") thisParams.pollutionType = 'WATER_POLLUTION'
				that.ajax({
					url: '/entPollution/getEntPollutionList',
					data: JSON.stringify(thisParams),
					contentType: 'application/json',
					success: function(result) {
						that.pollutionList = result.data
					},
				})
			},

			getAreaList() {
				that.ajax({
					url: '/linkMng/getAreaList',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(res) {
						that.areaList = res.data
					}
				});
			},

			getEquipmentList(value) {
				if (value) {
					if (value != that.gasLinkParams.areaId) {
						that.gasLinkParams.sourceId = ""
					}
					that.gasLinkParams.areaId = value
					that.$forceUpdate()
				}
				that.ajax({
					url: '/linkMng/getEquipmentList',
					data: {
						workshopId: that.gasLinkParams.areaId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {
						that.sourceList = res.data
					}
				});
			},

			pageLink() {
				that.ajax({
					url: '/linkMng/pageLink?ticketId=' + that.$store.state.token + '&pageIndex=1&pageSize=999',
					data: JSON.stringify(that.getParams),
					contentType: 'application/json',
					success: function(data) {
						that.linkList = data.data.records;
						for (let item of that.linkList) {
							item.linkPollutionList = item.linkPollutionList || []
						}
					}
				});
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>